<template>
  <div>
    <el-row class="gl_searchBox gl_mb_15" :gutter="20">
      <el-col :md="8">
        <p style="margin-right:20px">上课时间</p>
        <el-radio-group v-model="tabPosition" size="mini" @change="getdate()">
          <el-radio-button v-for="item in quickDateList" :key="item.code" :label="item.code">{{ item.name }}</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <div style="margin-top:12px">
      <el-table v-loading="tableLoading" class="gl_table_noBorder" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="上课课程" prop="courseName" />
        <el-table-column label="上课时间">
          <template slot-scope="{ row }">
            {{ row.courseDate | FormatDate('yyyy-MM-dd') }}  {{ 10 > row.startHour ? '0' +row.startHour : row.startHour }}:{{ 10 > row.startMinute ? '0' + row.startMinute : row.startMinute }}
          </template>
        </el-table-column>
        <el-table-column label="上课教练" align="center">
          <template slot-scope="{row}">
            <div v-for="coach in row.courseEmployees" :key="coach.id">
              <div v-if="coach.courseEmployeeTypeCode == 'Coach'">
                {{ coach.employee && coach.employee.name }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上课教室" prop="classroomName" />
        <el-table-column label="上课内容" prop="description" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="Signin(row)">签到</el-button>
            <el-button size="mini" type="text" @click="Signout(row)">签退</el-button>
            <el-button size="mini" type="text" style="color:#FFBA00" @click="deleteclass(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="gl_pt_15" style="text-align: right;">
        <el-pagination
          :current-page="Api_GET_ClubCourseScheduleQO.Page"
          :page-size="Api_GET_ClubCourseScheduleQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { api_GET_ClubCourseSchedule, api_DELETE_ClubCourseScheduleId } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCourseScheduleQO } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      currentPage: 1,
      tableLoading: false,
      tabPosition: 'Today',
      Api_GET_ClubCourseScheduleQO: new Api_GET_ClubCourseScheduleQO(),
      tableData: [],
      totalPage: 0,
      quickDateList: [
        {
          code: 'Yesterday',
          name: '昨天'
        },
        {
          code: 'Today',
          name: '今天'
        },
        {
          code: 'Tomorrow',
          name: '明天'
        },
        {
          code: '',
          name: '全部'
        }
      ]
    };
  },
  computed: {
    quickDateObj () {
      const _today = new Date();
      const _returnResult = {};
      for (let i = 0; i < this.quickDateList.length; i++) {
        const item = this.quickDateList[i];
        _returnResult[item.code] = this.computeDateTime(item.code, _today);
      }
      return _returnResult;
    }
  },
  created() {
    // this.singinList();
    this.getdate();
  },
  methods: {
    Signin(row) {
      this.$router.push({ 'name': 'SigninType', query: { courseName: row.courseName, name: 'SignList', sinname: 'sigin', id: this.$route.query.id, CourseScheduleId: row.id }});
    },
    Signout(row) {
      this.$router.push({ 'name': 'SigninType', query: { courseName: row.courseName, name: 'SignList', sinname: 'sigout', id: this.$route.query.id, CourseScheduleId: row.id }});
    },
    singinList(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCourseScheduleQO.Sorting = '';
      this.Api_GET_ClubCourseScheduleQO.Page = page || 1;
      this.Api_GET_ClubCourseScheduleQO.SkipCount = (this.Api_GET_ClubCourseScheduleQO.Page - 1) * this.Api_GET_ClubCourseScheduleQO.MaxResultCount;
      this.Api_GET_ClubCourseScheduleQO.IncludeClass = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeCourse = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeCoach = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeClassroom = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IsFinished = '';
      this.Api_GET_ClubCourseScheduleQO.ClassId = this.$route.query.id;
      api_GET_ClubCourseSchedule(this.Api_GET_ClubCourseScheduleQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    deleteclass(row) {
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_ClubCourseScheduleId(row.id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.singinList(this.Api_GET_ClubCourseScheduleQO.Page);
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCourseScheduleQO.MaxResultCount = MaxResultCount;
      this.singinList();
    },
    pageIndexChange(currentPage) {
      this.singinList(currentPage);
    },
    // 计算时间
    computeDateTime(code, date) {
      const _dayTime = 86400000; // 一天的时间戳
      const _today = this.getDateData(date);

      if (code === 'Today') {
        // 今天
        return {
          StartDateTime: `${_today.year}-${_today.monthStr}-${_today.dateStr}`,
          EndDateTime: `${_today.year}-${_today.monthStr}-${_today.dateStr}`
        };
      } else if (code === 'Yesterday') {
        // 昨天
        const _yesterdayTime = _today.time - _dayTime;
        const _yesterday = new Date(_yesterdayTime);
        const _yesterdayFormat = this.getDateData(_yesterday);
        return {
          StartDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`,
          EndDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`
        };
      } else if (code === 'Tomorrow') {
        // 明天
        const _yesterdayTime = _today.time + _dayTime;
        const _yesterday = new Date(_yesterdayTime);
        const _yesterdayFormat = this.getDateData(_yesterday);
        return {
          StartDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`,
          EndDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`
        };
      } else if (code === 'Week') {
        // 本周
        const _weekStartDateTime = _today.time - ((_today.day - 1) * _dayTime);
        const _weekStartDate = new Date(_weekStartDateTime);
        const _weekStartDateFormat = this.getDateData(_weekStartDate);

        const _weekEndDateTime = _today.time + ((7 - _today.day) * _dayTime);
        const _weekEndDate = new Date(_weekEndDateTime);
        const _weekEndDateFormat = this.getDateData(_weekEndDate);

        return {
          StartDateTime: `${_weekStartDateFormat.year}-${_weekStartDateFormat.monthStr}-${_weekStartDateFormat.dateStr}`,
          EndDateTime: `${_weekEndDateFormat.year}-${_weekEndDateFormat.monthStr}-${_weekEndDateFormat.dateStr}`
        };
      } else if (code === 'Month') {
        // 本月
        const _monthStartDateTime = _today.time - ((_today.date - 1) * _dayTime);
        const _monthStartDate = new Date(_monthStartDateTime);
        const _monthStartDateFormat = this.getDateData(_monthStartDate);

        const _monthLastDay = new Date(_today.year, _today.month, 0); // 本月最后一天
        const _monthEndDateFormat = this.getDateData(_monthLastDay);

        return {
          StartDateTime: `${_monthStartDateFormat.year}-${_monthStartDateFormat.monthStr}-${_monthStartDateFormat.dateStr}`,
          EndDateTime: `${_monthEndDateFormat.year}-${_monthEndDateFormat.monthStr}-${_monthEndDateFormat.dateStr}`
        };
      } else {
        // 其他情况
        return {
          StartDateTime: '',
          EndDateTime: ''
        };
      }
    },
    // 获取想要的时间数据
    getDateData (date) {
      const _year = date.getFullYear(); // 当前年
      const _month = date.getMonth() + 1; // 当前月
      const _date = date.getDate(); // 当前日
      const _day = date.getDay(); // 当前周几
      const _time = date.getTime(); // 当前时间戳
      const _strMonth = _month <= 9 ? '0' + _month : _month;
      const _strDate = _date <= 9 ? '0' + _date : _date;
      return {
        year: _year,
        month: _month,
        monthStr: _strMonth,
        date: _date,
        dateStr: _strDate,
        day: _day,
        time: _time
      };
    },
    getdate() {
      this.Api_GET_ClubCourseScheduleQO.StartTime = this.quickDateObj[this.tabPosition].StartDateTime;
      this.Api_GET_ClubCourseScheduleQO.EndTime = this.quickDateObj[this.tabPosition].EndDateTime;
      this.singinList();
    }
  }

};
</script>

<style lang="scss" scoped>
.date {
    color: black;
    opacity: 65%;
}
</style>

